본문으로 건너뛰기

SVG 최적화

9. SVG 최적화​

SVG 최적화는 파일 크기를 줄이고 성능을 향상시키기 위해 불필요한 코드와 중복된 요소를 제거하는 과정입니다. 최적화된 SVG 파일은 웹페이지 로딩 시간을 단축하고, 네트워크 대역폭을 절약하며, 사용자 경험을 향상시킬 수 있습니다. 이 섹션에서는 SVG 파일을 최적화하는 방법과 도구를 소개합니다.

9.1 파일 크기 줄이기​

SVG 파일 크기를 줄이는 방법에는 불필요한 코드 제거, 압축 기법을 사용한 최적화 등이 있습니다.

9.1.1 불필요한 코드 제거​

  • 불필요한 공백 및 주석 제거: 코드 내 불필요한 공백, 줄바꿈, 주석은 SVG의 가독성을 높이지만 파일 크기를 증가시킬 수 있습니다. 이러한 부분을 제거하여 파일 크기를 줄일 수 있습니다.
  • 중복된 속성 제거: SVG 요소에 중복된 스타일이나 속성이 있을 경우, 이를 한 번만 정의하거나 제거함으로써 코드 크기를 줄일 수 있습니다.
  • 명시적 좌표 제거: 기본값이거나 불필요한 x, y, width, height 등의 좌표 값이 명시된 경우 제거할 수 있습니다.

9.1.2 압축 기법​

SVG는 XML 형식이므로, gzip과 같은 압축 기법을 사용하여 상당한 파일 크기 감소를 기대할 수 있습니다. 대부분의 브라우저는 gzip 압축된 SVG를 자동으로 해제하므로, 압축을 사용하면 파일 크기를 대폭 줄일 수 있습니다.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 필요 없는 공백과 주석 제거된 SVG -->
  <rect x="50" y="50" width="100" height="100" fill="blue" />
</svg>

9.2 코드 최적화 팁​

SVG 코드를 최적화하면 유지보수성이 향상되고, 불필요한 중복을 피할 수 있습니다. 이를 통해 SVG 파일을 더욱 효율적으로 관리할 수 있습니다.

9.2.1 간결한 코드 작성​

SVG 코드 작성 시 가능한 한 간결하게 작성하는 것이 중요합니다. 중복되는 코드나 불필요한 속성, 요소를 제거하는 것이 최적화의 핵심입니다.

  • 중복 스타일의 제거: 여러 SVG 요소에 동일한 스타일이 적용될 경우, 인라인 스타일 대신 <style> 태그를 사용하거나 CSS 클래스를 정의하여 코드 중복을 줄일 수 있습니다.

9.2.2 재사용 가능한 코드 구조​

  • 심볼과 재사용: 동일한 요소를 여러 번 사용해야 한다면, <symbol> 및 <use> 태그를 사용하여 동일한 코드의 반복을 줄일 수 있습니다. 이를 통해 코드 재사용성을 높이고, 파일 크기를 줄일 수 있습니다.

  • 그룹화: 비슷한 속성을 가진 SVG 요소들은 <g> 태그를 사용하여 그룹화할 수 있습니다. 이를 통해 공통 속성을 한 번만 정의하고, 코드 중복을 줄일 수 있습니다.

9.3 도구 소개​

SVG 파일 최적화를 도와주는 다양한 도구들이 존재합니다. 이러한 도구들은 불필요한 코드를 자동으로 제거하거나, 중복된 속성을 정리하여 파일 크기를 줄이고 성능을 향상시킬 수 있도록 도와줍니다. 여기서는 대표적인 SVG 최적화 도구인 SVGO와 SVGOMG에 대해 소개하겠습니다.

9.3.1 SVGO (SVG Optimizer)​

SVGO는 가장 널리 사용되는 SVG 최적화 도구 중 하나로, 불필요한 코드, 중복된 속성, 메타데이터 등을 자동으로 제거하여 SVG 파일 크기를 줄여줍니다. SVGO는 Node.js 기반의 CLI(Command Line Interface) 도구로, 명령어를 통해 SVG 파일을 빠르고 효율적으로 최적화할 수 있습니다.

SVGO 설치 및 사용 방법​

  1. Node.js 설치: 먼저 Node.js가 설치되어 있어야 합니다. Node.js가 설치되어 있지 않다면 Node.js 공식 사이트에서 설치할 수 있습니다.

  2. SVGO 설치: SVGO를 전역으로 설치합니다.

npm install -g svgo
  1. SVGO 사용: 설치 후, 최적화할 SVG 파일에 대해 아래 명령어를 실행합니다.
svgo input.svg -o output.svg
  • input.svg: 최적화할 SVG 파일
  • output.svg: 최적화된 파일을 저장할 위치
  1. 추가 설정: SVGO는 다양한 플러그인을 통해 최적화 옵션을 조정할 수 있습니다. 필요한 설정은 svgo.config.js 파일을 통해 추가할 수 있습니다.

주요 최적화 작업

  • 불필요한 메타데이터 제거
  • 불필요한 공백 및 주석 제거
  • 기본값이 명시된 속성 제거
  • 중복된 코드 압축